<template>
	<div class="padding-across-10" style="height:100%;margin-bottom: 100px" v-loading="loading" element-loading-text="拼命加载中">
		<div class="flex-inline">
			<headerOpreate :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
			<div class="block" style="text-align:right;">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
				</el-pagination>
			</div>
		</div>
		<div style="width: 100%;border: 1px solid gray;padding: 5px;margin: 3px 0;">
			<el-row v-if="featureDatas.length > 0" :gutter="10">
				<el-col :span="6" v-for="item in featureDatas" style="margin-top: 5px;">
					<div style="position:relative ">
						<el-checkbox v-model="item.isChecked" style="position:absolute; left: 0px;padding: 0px 5px;"></el-checkbox>
						<div style="position:absolute; right: 0px; bottom:5px; color:#fff;background-color: #000;
															opacity: 0.5;font-size: 13px;border-radius: 3px;padding: 0px 5px;">注册设备:{{item.sn}}</div>
						<img style="border-radius: 5px;" title="点击放大" v-bind:src="item.path" height="100%" width="100%" @click="bigImg(item)" />
					</div>
				</el-col>
			</el-row>
			<div v-else style="text-align: center; color: #324157;">
				<h2>该读者暂无注册信息</h2>
			</div>
		</div>
		<div class="block" style="text-align:right;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total, sizes,prev, pager, next, jumper" :total="totalSize">
			</el-pagination>
		</div>
		<el-dialog :visible.sync="dialogImg" id="img-diglog" :show-close="false">
			<img v-bind:src="imgUrl"/>
		</el-dialog>
	</div>
</template>

<script>
	import $ from 'jquery';
	import headerOpreate from '../../../../components/headerOpreate'
	import { GloabFun, HttpServer } from '../../../../assets/js/common.js'
	export default {
		components: {
			headerOpreate
		},
		data() {
			return {
				isReload: false,
				featureDatas: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				dialogImg: false,
				imgUrl: '',
				opreateDatas: [{
						show: true,
						size: "small",
						type: 'primary',
						icon: 'el-icon-eleg-icon_refresh el-icon--left',
						name: this.$t("message.refresh"),
						action: 'reloadDatas'
					},
					{
						type: 'danger',
						size: 'small',
						icon: "el-icon-delete2 el-icon--left",
						name: "删除",
						action: "multipleDelete"
					}
				]

			}
		},
		props: {
			templateObj: {
				type: Object,
				default: {}
			}
		},
		methods: {
			executeAction(action) {
				if(action) {
					this[action]();
				}
			},
			bigImg(item) {
				this.dialogImg = true;
				this.imgUrl = item.path;
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.getDatas();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getDatas();
			},
			formateSelectData() {
				var result = [];
				for(var i = 0; i < this.featureDatas.length; i++) {
					if(this.featureDatas[i].isChecked) {
						result.push(this.featureDatas[i].keyid);
					}
				}
				return result;
			},
			//批量删除
			multipleDelete() {
				if(this.formateSelectData().length > 0) {
					this.$confirm('此操作将删除读者注册信息，是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost.call(this, '/Api/ReaderFeature/Delete', {
							ids: this.formateSelectData(),
							UserId: parseInt(GloabFun.getKeyId())
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$notify({
									title: '成功',
									message: this.$t('message.bulkDeleteSuccess'),
									type: 'success',
									duration: 2500
								});
							} else {
								this.$notify.error({
									title: '错误',
									message: response.data.msg,
									duration: 2500
								});
							}
							this.getDatas();
						});
					}).catch(() => {
						this.$notify.info({
							title: '消息',
							message: this.$t('message.operationCanceled'),
							duration: 2500
						})
					});
				} else {
					this.$notify({
						title: this.$t('message.warning'),
						message: this.$t('message.selectBulkDeleteWarning'),
						type: 'warning',
						duration: 2500
					});
				}
			},
			//刷新
			reloadDatas() {
				this.isReload = true;
				this.getDatas();
			},
			getDatas() {
				HttpServer.httpPost.call(this, '/Api/ReaderFeature/InfoByTag', {
					sn: '',
					tag: this.templateObj.tag,
					index: this.currentPage,
					pagesize: this.pageSize,
				}, function(response) {}, function(response) {
					if(response.data.code === 0) {
						this.featureDatas = response.data.paths;
						this.totalSize = response.data.total;
						if(this.isReload) {
							this.$notify({
								title: '成功',
								message: this.$t('message.refreshSuccess'),
								type: 'success',
								duration: 2500
							});
						}
					} else {
						this.$notify.error({
							title: '错误',
							message: response.data.msg,
							duration: 2500
						});
					}
					this.isReload = false;
				})
			}
		},
		created() {
			this.getDatas();
		}
	}
</script>

<style scoped>
	@import '../../../../assets/css/font-awesome-4.7.0/css/font-awesome.css';
</style>
<style scoped lang="less">
	@import '../../../../assets/css/media-screen.less';
</style>

<style scoped lang="less">
	* {
		box-sizing: border-box;
	}
</style>
<style lang="less" scope>
	.flex-inline {
		display: flex;
		justify-content: space-between;
		.query {
			display: flex;
		}
	}
	
	#img-diglog {
		text-align: center;
		.el-dialog{
			background: none;
			box-shadow: none;
		}
		.el-dialog__body {
			overflow: visible !important;
		}
	}
</style>